<template>
	<view class="_abbr">
		<view class="public">
			<view v-for="item in deviceRecordList" :key="item.replacementId" class="record">
				<view class="record-item">
					<view class="item">
						<view>{{item.oldDeviceQr}}</view>
						<view class="device">{{item.deviceType}} {{item.deviceBrand}} {{item.deviceModel}}</view>
					</view>
					<u-icon name="arrow-downward" color="#2979ff" size="28"></u-icon>
					<view class="item" v-if="item.newDeviceQr">
						<view>{{item.newDeviceQr}}</view>
						<view class="device">{{item.deviceType}} {{item.deviceBrand}} {{item.deviceModel}}</view>
					</view>
					<view class="button" v-else>
						<u-button type="primary" :plain="true" size="mini" text="取消" @click="handleCancel(item)"></u-button>
					</view>
					<view class="footer" />
				</view>
			</view>
		</view>
		<view v-if="deviceRecordList.length === 0">
			<view class="no-record">
				暂无换机记录~
			</view>
		</view>
	</view>
</template>

<script>
import request from "@/utils/request.js";
export default {
	data() {
		return {
			orderTestingId: "",
			deviceRecordList: []
		}
	},
	onLoad(options) {
		uni.showLoading({
			title: '正在加载中'
		})
		this.orderTestingId = options.workId
		this.getDeviceRecord()
		uni.hideLoading()
	},
	methods: {
		// 取消
		handleCancel(item) {
			const self = this; // 保存当前对象的引用
			uni.showModal({
				title: '确定取消换机吗',
				success: function (res) {
					if (res.confirm) {
						// 提交
						request({
							url: `system/detailReplacement/${item.replacementId}`,
							method: "delete",
						}).then(res => {
							if (res.code === 200) {
								uni.showToast({
									title:"取消换机成功",
									icon:'none'
								})
								self.getDeviceRecord()
							}
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		},
		// 获取记录
		getDeviceRecord() {
			request({
				url: 'system/detailReplacement/list',
				method: "GET",
				data: {
					orderId: this.orderTestingId
				}
			}).then(res => {
				this.deviceRecordList = res.rows
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	._abbr {
		width: 100%;
		height: 100%;
		background-color: rgba(244, 249, 254, 1);
		.no-record {
			display: flex; 
			align-items: center;
			justify-content: center; 
			margin-top: 60px;
			background-color: #fff;
		}
		.public {
			background-color: #ffffff;
			.record {
				border:1px solid;
				border-radius: 2%;
				padding: 20upx;
				border-color: rgba(0, 124, 233, 0.4);
				margin: 20upx;
				.record-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					.item {
						display: flex;
						flex-direction: column;
						.device {
							font-size: 12px;
							color: #7e7e7e;
							margin: 3px 0;
						}
					}
					.button {
						position: absolute;
						right: 80upx;
						bottom: 10px;
						width: 40rpx !important;
					}
					.footer{
						height:30px;
						background-color: #ffffff;
						border-bottom-left-radius: 15upx;
						border-bottom-right-radius: 15upx;
					}
				}
			}
			.main_body_view_title {
				border-bottom: 1px solid black;
				margin-bottom: 10upx;
			}
			.user_for {
				display: flex;
			}
			.line_for {
				width: 4rpx;
				height: 24rpx;
				margin: 0 20rpx 10rpx;
			}
			.line_radio {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
				top: 0;
			}
			.right_box {
				padding: 0rpx 20rpx 20rpx 20rpx;
			}
			.desc {
				font-size: 30rpx;
				display: flex;
				margin-top: 20rpx;
				align-items: center;
			}
		}
	}
</style>